<html xmlns="http://www.w3.org/1999/xhtml" id="language-preliminaries">
<head>
<title>LZX言語の基礎知識</title>
　<othercredit role="translator">
	<firstname>Shinichiro</firstname>
	<surname>Oka</surname>
        <contrib>2005/04/12　翻訳初版</contrib>
  </othercredit>
  <othercredit role="translator">
 	<firstname>Manabu</firstname>
	<surname>Togawa</surname>
        <contrib>2005/12/14　3.1対応。HTML化。</contrib>
  </othercredit>
</head>
<body>

<h1>LZX言語の基礎知識</h1>

<p>LZXとはリッチインターネットアプリケーションのプレゼンテーション層を作成するためのタグベースオブジェクト指向言語で、XML構文とJavaScript構文を合わせ持っています。
主にこれらのアプリケーションはOpenLaszloコンパイラーによってコンパイルされ、スタンドアローンファイルまたは、OpenLaszloサーバー上に配置されます。言語仕様にはXMLタグとJavaScript APIが含まれます。</p>

<p>LZX言語は通常の構文と命名規則を用いるように設計されています。そのため、経験豊かなWEB開発者は、これを簡単に習得し自分のプログラムに組み込むことができることに気づくはずです。また同時に、LZXは他の技術よりもより滑らかでより応答性の高いユーザーインターフェイスをもったWEBアプリケーションを作成するための、新しいコンセプトと機能を提供します。</p>

<p>実行されたLZXプログラムは、基本的にスクリーン上のキャンバス(canvas)と呼ばれるビジュアルオブジェクトへ配置されます。
キャンバス上にはビュー(view)と呼ばれる独立したボックスが配置されます。これらのビューは論理的、視覚的にネストされ、サイズ、位置、背景色、透明度、クリック可能性、伸縮可能性など、プログラムからアクセス可能なたくさんの属性を持っています。ビューはたとえば画像やビデオなどのリソースを含めるためにも使われ、いかなるXML形式のデータと動的にバインドさせることもできます。すべてのビューの属性は、他のビューの関数となるように設定することができます。時間とともに変化するように設定することで、事実上あらゆるビューの属性はアニメーションさせることができます。</p>

<p>LZXのビューシステムは、他の多くのものと似ていますが、データバインディング、属性制約、アニメーションの実装は他のUI技術にはない特徴です。</p>

<p>LZXプログラムは、宣言型、手続き型両方の構造を含んでおり、命名規則の多くはCSS(カスケーディング・スタイルシート)に従っています。
そのため、LZXで書かれたプログラムは一見JavaScriptの埋め込まれたDHTMLアプリケーションのように見えます。しかし、LZXプログラムはWEBブラウザによって翻訳され、表示または"実行"される通常のDHTML/JavaScriptアプリケーションとはコンセプトが異なります。LZXプログラムでは対照的に、サーバー上でコンパイルされ、対象となるレンダリングエンジン用のバイトコードとしてダウンロードされます。</p>

<p>Laszloプラットフォームの現在の実装では、LZXプログラムはOpenLaszloサーバー内でコンパイルされ、Flashムービー(.swfファイル)としてダウンロードされ、インターネットブラウザのプラグインであるFlashPlayer内で実行されます。しかし、作成されたバイトコードの実行/表示用エンジンの一つとしてのみFlashPlayerは利用され、Flash固有の機能に依存した部分はまったくないという、重要な点をしっかり理解しておいてください。つまり、LZXはFlashオブジェクトモデルを採用しておらず、Flashに依存していません。</p>

<p>同様に、LZXプログラムはLaszloプレゼンテーションサーバによってコンパイルされるため、LZXプログラムでのJavaScriptの使用は、ブラウザと通信したり、HTMLページを生成したりするためにJavaScriptを使うこれまでのWEBアプリケーションでの使用とは若干異なります。 LZXアプリケーションでは、これら従来のJavaScript機能とは基本的に無関係です。言語のデザインはいくらか旧式ですが、プログラミングパラダイムは全く新しいものです。</p>

<p>この章ではLZXの従来から引き継いだ特長と全く新しい特徴を要約しています。この章は要約であってチュートリアルではありません。読み終わるころには、この言語の学習へどのようにに取り組めばよいかより決めやすくなるでしょう。これまでの経験に応じて、LZXに取り組む前にXMLやオブジェクト指向についてもうすこし学ぶ必要があると思うかもしれませんし、これらの概念は理解していれば、すぐにコーディングをはじめたいと思うでしょう。どちらにしても、チュートリアルの<a href="${tutorials}laszlo_basics.html">Laszloの基本</a>から始めることをお勧めします。</p>

<h2>文法と動作の概要</h2>

<p>LZXではXMLタグはJavaScriptオブジェクトを作成するために使われ、JavaScriptはLZXプログラム内で、タグによって作成されたオブジェクトを操作するために使われます。ほとんどの場合、タグでできることはJavaScriptpでもでき、逆もまた然りです。しかし、この等価性は常に成り立つわけではなく、通常ほとんどの状況で一方の技術は大幅に優れています。LZXの<em>学習</em>とはつまり、基本的にタグとAPIを知ることです。言語の<em>習得</em>には開発を通して、手続き型と宣言型の開発手法の微妙な違いを理解し、それぞれをいつどのように用いるかを学ぶことが必要となります。</p>

<p>LZXはXMLとJavaScriptの文法に厳格に従っています。</p>
<note>
LZXの初期リリースでは、JavaScript内でケースセンシティブではありませんでした。OpenLaszlo3.0でリリースされたLZXからは完全にケースセンシティブな言語となっています。詳細は以下をご覧下さい。</note>

<p>続く章で、LZXの二種類の文法を簡単に補足します。通常のLZXプログラム内でJavaScriptとXMLがどのように協調して動作するか説明しています。</p>

<h3>XML</h3>

<p>XML（拡張可能マークアップ言語）はデータを表記用のW3C標準です。
LZX言語でプログラムを書くために、二つの理由でXMLの概念にある程度精通しておく必要があります。第一に、LZXのほとんどの機能はXMLタグセットで実装されています。LZXプログラム自体が正当なXML文書であり、正当なXML文書でないLZXプログラムは単純にコンパイルすることができません。二つめは、LZXプログラムが操作できるデータはXML形式のみでからです。</p>

<p>XMLでタグと属性がどのように表現されるか、ルートとノードの概念になじんでおり、どのように入れ子構造が動作するか、といったことを理解していれば、十分にLZXを始めることができるでしょう。XMLに関するもっと詳しいオンラインブックやチュートリアルといった情報やリンクは <a href="http://www.w3.org/XML/">W3Cのウェブサイト</a>にどっさりあります。</p>

<p>XMLとJavaScriptの違いとして、XMLでの型名称は小文字で表記され("string"、"number")ますが、JavaScriptでは"String"、"Number"のように大文字で表現されるということです。XMLのスキーマで定義されたデータタイプと互換性を保つため、&lt;attribute name="foo" type="string"/&gt;で使われるXMLの型名称は小文字を使います。</p>
<h4>XMLとHTML</h4>
<p>もしXMLの経験がなくてもHTMLの経験があれば、たくさんの共通点があることに気づくでしょう。ここではHTMLのみをご存じの方へ、XMLとHTMLのいくつかの違いを説明します。次のことはXML全般に当てはまります。HTMLタグと同じ名前、意味をもつ(&lt;p&gt;, &lt;i&gt;, &lt;br&gt;)タグの利用法を説明することで、テキストのマークアップについて理解できるようになるでしょう。</p>
<ul>
	<li>大文字小文字の区別。  &lt;b&gt; は &lt;B&gt;と区別されます。  (&lt;b&gt;は&lt;text&gt;要素内で太字テキストを表すタグとしてLZXに定義されていますが、&lt;B&gt;は定義されていません。)</li>
	<li>属性値には" または 'のクォーテーションが必要。 &lt;view width=100&gt;は正当なXML文書でありません。代わりに&lt;view width='100'&gt; または &lt;view width="100"&gt; を使います。</li>
	<li>空の要素は閉じる。  &lt;br&gt; は正当なHTMLタグですが、XMLでは代わりに &lt;br&gt;&lt;/br&gt; か &lt;br/&gt; を使います。.</li>
</ul>


<h4>名前空間</h4>
<p>
Laszloアプリケーションは名前空間を表記することができます。</p>
<pre>
  &lt;canvas xlmns="http://www.laszlosystems.com/2003/05/lzx"&gt;...&lt;/canvas&gt;
</pre>
<p>
もしくは何も書かず次のようにします。</p>
<pre>
  &lt;canvas&gt;...&lt;/canvas&gt;
</pre>
<p>
もし名前空間が設定されていない場合、コンパイラーは標準のLZX名前空間(<a href="http://www.laszlosystems.com/2003/05/lzx">http://www.laszlosystems.com/2003/05/lzx</a>)を使います。
</p>
<h3><a name="javascript">JavaScript</a></h3>

<p>JavaScriptはそもそもNetscape 2.0ブラウザに含めるため、NetscapeのBrendan Eichによって書かれた言語です。これはすぐに成功し、他のブラウザへ幅広く採用されました。そして、この新しい技術の標準化を保つため、ヨーロッパ電子計算機工業会（ECMA)により、ECMAScriptとし体系化され発展を続けています。JavaScriptの実装と標準団体によって公式に定義された言語とは微妙に異なる部分もあるでしょうが、一般的にJavaScriptとECMAScriptという言葉は同じ意味で使われています。もう少し正確に言えば、一方の"ECMAScript"が純粋に言語を意味するのに対し、"JavaScript"は言語だけでなく、ほとんどのブラウザ上で利用できるライブラリ群の両方を意味します。このドキュメントではこの言葉を、一般的なゆるやかな意味でつかいますが、文脈からどちらについて記述しているか理解できると思います。"スクリプト"という言葉はJavaScriptで書かれたすべての（手続き型）コードを指しています。</p>

<p>LZXは <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAincorporates-262 Edition 3仕様</a>の一部を実装しています。</p>

<p>正当なLZXコードを書くために、JavaScriptの次のような面に慣れる必要があります。</p>
<ul>
<li>基本的な制御構造 (<code>for</code>、 <code>while</code>,
など。)</li>
<li> オブジェクトモデル</li>
<li> "ゆるやかな" データ型</li>
<li> スコープ。つまりプルグラム内の名前空間の範囲。</li>
</ul>

<p>経験に応じて、LZX言語にはいくつか理解しやすいか、ぴんとこない点があると思います。例えば、Javaの経験はあるがJavaScriptの経験が無い場合、特にデータ型、オブジェクトモデル、変数のスコープと名前空間といった言語の主な違いに注意する必要があります。</p>

<p>いわゆるスクリプト言語と呼ばれるPerlやPythonのような他の言語と同じように、JavaScriptはゆるい型の言語です。変数は型指定なしで宣言することができます。この点によりすばやくプロトタイプを作成でき、コードはより読みやすくなりますが、データ型のエラーを見つけにくくしてしまうことになります。</p>

<p>オブジェクト思考プログラミングへのJavaScriptの方法はJavaのような厳格さを欠きます。パッケージやインターフェイスは存在せず、例えば、クラスを終了させることもできません。さらに、JavaScriptにおけるローカル変数とグローバル変数は、しばしばJavaプログラマを驚かせます。</p>

<p>逆に、経験をつんだJavaScriptプログラマにとっては、ある前提を"忘れる"ことが必要となります。特定のライブラリや関数が利用できないことや、大文字小文字の区別に関して特に注意してください。さらに、LZXはシンプルなJavaScriptよりも完全なオブジェクト指向のプログラムモデルを持っており、LZXにはクラスや継承があります。</p>

<p>もしJavaやJavaScriptの経験がなければ、LZXの迷宮に踏み込む前に<a href="http://www.w3schools.com/js/default.asp">w3schools.com</a>で公開されているJavaScriptのチュートリアルを試してみてみることから始めてもよいでしょう。</p> 

<h3>"ドット" 文法</h3> 

<p>LZXはオブジェクトとメンバの関係を表すため"ドット"(ピリオド)文法を用います。以下の式をみてください。</p> 

<p><code>this.that</code></p>

<p>JavaScriptとして解釈された時、<code>this</code>はオブジェクトを参照し、<code>that</code>はオブジェクトの属性を表します。属性はメソッドとなる場合もあります。それでは次のLZXコードの一部を見てください。</p>

<code>
&lt;view name="beatles"&gt; 
  &lt;view name="george"/&gt; 
&lt;/view&gt;
</code>  

<p>この例で内部ビューの"george"を参照するには、次のように簡単に表記できます。</p> 

<p><code>beatles.george</code></p> 

<p>この場合、 <varname>george</varname> は<varname>beatles</varname>の子となります。</p> 

<p>以下で詳しく説明していますが、LZXは　変数、メソッド、オブジェクトやクラスを定義する様々な方法を提供します。
例えば、次の二つのコード例(<varname>myview</varname>という名前のビューを作成し、背景色を赤に設定）は同じ実行結果を表示します。</p> 

<p>JavaScript</p> 

<pre>myview = new LzView;</pre> 

<pre>myview.setAttribute (bgcolor, red);</pre>

<p>XMLタグ:</p> 

<pre>&lt;view name="myview" bgcolor="red"/&gt;</pre>

<p>どちらの場合も<code>myview</code>の背景色はその後<code>myview.bgcolor</code>としてアクセスできます。
"ドット"記法はオブジェクトの参照に、宣言型タグ、手続き型コードどちらによって作成されたかに関わらず、分かりやすい方法を提供します。</p> 
<h3>ケースセンシティブ</h3>
<p>
LZXの大文字小文字の区別はコンパイル方法の対象によって異なります。3.1リリースの時点では、swf6、swf7、swf8で出力できます。swf6でコンパイルされたアプリケーションは大文字と小文字を区別しないため、大文字小文字の違いのみで一意名として区別することはできません。例えば、ローカル変数に<tt>date</tt>と名付けると、JavaScriptから<tt>Date</tt>クラスのコンストラクターを<tt>new Date()</tt>のように呼ぶことができなくなります。</p>
<p>
swf7はディフォルトです。swf7とswf8にコンパイルしたアプリケーションは完全に大文字小文字を区別します。つまり、変数を使う場合、大文字小文字を含め定義されたとおりの変数名であるひつようがります。</p>
<p>
これらのことからswf6で動作するアプリケーションはswf7で動作しませんし、逆もまた然りです。
</p>

<p>出力対象にかかわらず、大文字小文字のみの違いで変数を定義することは、混乱のもとです。したがって、スペルが同じで大文字小文字のみで名前を定義することを避ける習慣をつけてください。</p>

<h3>LZXのDTDとスキーマ</h3> 

<p>XMLスキーマはLZXタグセットを定義しており、エディターを設定するために使うこともできます。興味があればDTDもまた利用できますが、プログラミングを行う場合は特に気にする必要はありません。</p>

<p>LZXスキーマはOpenLaszloコンパイラーによってLZXプログラムが形式的に正しいか確認するために使われます。例えば、スキーマは<tagname>view</tagname>の開始タグがどの属性を含むことができるか定義しています。プログラム内でスキーマによって定義されていない<tagname>view</tagname> タグの属性を使った場合、コンパイラはワーニングを発生させます。</p>

<p>LZXでは独自のタグを定義することができます。ユーザー定義タグはエディタで利用するためスキーマに組み込むことはできませんが、プログラムの正当性をテストするためにコンパイルラによって使われる内部スキーマで利用されます。</p>


<!--  later chapters will explain implications of this fact for debugging your programs.
-->

<h2><a name="objects-and-attributes"/>オブジェクトと属性</h2> 


<p>LZXは継承、カプセル化、ポリモーフィズムといった標準的なオブジェクト指向プログラムの概念を取り込んでいます。一般的にLaszloプログラム内のタグは、その名前をもつクラスのインスタンスオブジェクトと対応します。例えば<tagname>view</tagname> タグは<classname>LzView</classname>オブジェクトと対応しています。</p> 

<p>LZXはビューと呼ばれる(JavaScriptの)ビジュアルオブジェクトを操作する規則に基づく宣言型言語と言うことができます。それらの規則はオブジェクトの属性値の制約として記述します。</p> 

<p>次の章では、LZX言語におけるオブジェクト指向の主な面について説明します。これについては、このガイドよりも<xref linkend="class-inheritance" />でより詳細に説明しています。</p>

<h3>オブジェクト</h3> 

<p>オブジェクトとはデータ型の一つで、名づけられた値をいくつか含んでいます。その値のことは文脈によってオブジェクトの<em>プロパティ</em>または<em>属性(アトリビュート)</em>と呼ばれます。例えば、各<code>view</code>オブジェクトは、高さ、幅、x位置、y位置などの49の属性を持っています。オブジェクトの作成時に、通常それぞれの属性に値が割り当てられます。特に指定しなかった属性にはディフォルトの値が割り当てられます。</p> 

<p><tagname>class</tagname>タグを使うことで、新しい種類のLZXオブジェクトを作成することができます。それぞれ新しく作成したクラスには名前と"継承"元のクラス名が必要です。新たに作成されたオブジェクトは継承元のすべてのプロパティを引き継ぎます。また更に、新しいプロパティを定義し追加することもできます。
次の小さなサンプルで考えてみましょう。</p> 

<pre>&lt;class name="myview" extends="view"/&gt;</pre>

<p>この例では、<code>view</code>のすべてのプロパティを含む、<varname>myview</varname>と名付けられた新しい種類のオブジェクトを定義しています。<xref linkend="initialization-and-instantiation" />ではオブジェクトはコンパイラによってどのように定義され、実行環境によっていつ構築されるかより詳しく説明しています。</p> 

<h3>属性</h3> 

<p>LZXでは"属性"という言葉は、それぞれ少し異なっているが関連している、二つの意味で使われます。一つは構文上のもので、もうひとつは意味上のものです。XMLにおいて、構文的にも意味的も、属性とはXML要素に付加され、開始タグ内で定義された名前付きの値です。</p> 

<pre>&lt;boss demeanor="friendly"/&gt;</pre>

<p><attribute>demeanor</attribute>は<code>boss</code>タグの属性の一つです。ここでの"属性"の意味はXML構文の文書内では常に当てはまります。ちなみに属性に割り当てられた値はダブルコーテーションで囲まれます。</p> 

<p>LZXタグはJavaScriptクラスと対応するため"属性"は加えて、JavaScriptオブジェクトのプロパティという意味も含まれます。</p> 

<pre>&lt;view height="20" width="30"/&gt;</pre>

<p>つまり、このLZXタグでは、<attribute>height</attribute>と<attribute>width</attribute>属性に設定された値をもつオブジェクトを作成することになります。</p> 

<p><tagname>attribute</tagname>タグはオブジェクトのJavaScript属性を設定するのに使うこともできます。例えば、</p> 

<pre> 
&lt;view name="myview"&gt; 
  &lt;attribute height="20"/&gt; 
  &lt;attribute width="30"/&gt; 
&lt;/view&gt;  
</pre>

<p>では先の一行のものと同じ意味をもちます。つまり、ビューの<attribute>height</attribute>属性はXMLの開始タグに含まれていませんが同じものが表示されます。また <attribute>height</attribute>はXML的には、一つめの<tagname>attribute</tagname>タグの属性でもあります。 この値はスクリプトから<code>myview.height</code>のように参照することもできます。</p> 

<p><tagname>attribute</tagname>タグはまた、新しく作成したクラスに新しい属性を定義するために使います。例えば、、</p> 

<example executable="false">
&lt;class name="froboz" extends="view"&gt; 
  &lt;attribute name="whatnot" value="17"&gt; 
&lt;/class&gt;
</example>

<p>では、新しく50の属性を持つビューオブジェクトである<code>froboz</code>を定義しています。つまり、ビューから継承した49の属性と、新しく定義した<attribute>whatnot</attribute>属性です。</p> 

<p>ここまでLZXタグ内で属性へ値を設定する方法をみてきました。更に、<method>setAttribute</method>メソッドを使って属性へ値を設定することもできます。また、(タグ内ではなく）スクリプトから<method>getAttribute</method>メソッドを使って属性値を読み出し、つまり"取得"することができます(メソッドについては次に説明します)。</p> 

<p>ここで、<varname>johnny</varname>という名前のビューがあると考えてください。このビューはタグかスクリプトかどちらかで作成されているでしょうが、どのように作成されたかは問題ではありません。</p> 

<p>ビューの高さを100ピクセルに設定するJavaScriptコードはこのようになります。</p> 
<p><code>johnny.setAttribute("height", 100);</code></p> 

<p>そして高さを取得するにはこのようになります。</p> 

<p><code>johnny.getAttribute("height");</code></p> 

<p>属性が設定されるたびに、つまり属性値が変更されるたびに、<code>event</code>と呼ばれるオブジェクトが作成されます。次の章ではイベントとは何なのか、LZXプログラム内でイベントはどのような働きをするか説明します。</p> 

<h2>イベントとメソッド</h2> 

<h3>イベント</h3> 

<p>イベントとは何かが変化したときにオブジェクトが他と通信するための仕組みです。例えば、マウスボタンがクリックされたとき、サーバーからデータが届いたとき、ビューが作成されたときなどにイベントが作成されます。</p> 

<p>LZXプログラムでは、イベントは同時通信ではなく、イベントが発生したときに参照される関数ポインタである<code>delegates</code>を使い、どちらかと言うとポイントツーポイント型で通信されます。
この実装によりイベントを使う際の柔軟性を高めオーバーヘッドの発生を押さえています。ここではこの章での説明のためデリゲートについては触れず、イベントの動作についてもあまり厳密に説明しないでおきます。例えば、何かが<em>起きた</em>ことで、なにかのイベントが<em>発生</em>したとだけ言い、ここでは<em>どのように</em>それは起きたのかは脇にどけておきます。</p> 

<p>ビューには、LZXリファレンスマニュアルの<tagname link="true">view</tagname>の項目にあるように、およそ20ものイベントが定義されています。これらのイベントの多くは<event>onblur</event>、<event>onclick</event>、<event>onkeydown</event>のように、ユーザー入力を扱うもので、JavaScriptプログラマにとって馴じみのあるものでしょう。他の<event>onheight</event>と<event>onopacity</event>のようなイベントはビューの見た目に関係があるものです。最後に<event>oninit</event>と
<event>onconstruct</event>イベントはビューオブジェクトインスタンスの作成に関係があるものです。同様に、データセット(後ででてきます）のような他のシステム定義のLZXオブジェクトは、それぞれに独自のイベントを持っています。</p>

<p>イベントと属性はペアで動作することが多く、実際<code>setAttribute</code>メソッドのディフォルトの動作は、まずその名前のプロパティを設定し、次に"<code>on</code>"+プロパティ名のイベントを送信します。例えば、ビューの<attribute>x</attribute>（水平)位置を変更すると、変更後の<attribute>x</attribute>プロパティ値とともに<event>onx</event>イベントを送信します。つまり、システム定義のイベントに加えて、定義した属性にはそれぞれイベントが存在するということです。</p>

<p>イベントが発生すると、（定義されていれば）対応するイベントハンドラに制御が移ります。イベントは一つの引数を送ることができ、通常は変更されたプロパティに関する情報を伝えます。</p> 

<p>このガイドとは別の場所で、LZXではイベントがどのように実装され、イベントアーキテクチャがプログラム設計にどう影響するか説明しています。特に<xref linkend="delegates"/>でイベントとデリゲートの関係について説明しています。</p>

<h3>メソッド</h3> 

<p>LZXでは、メソッドは特定のオブジェクトに関連づけられたJavaScript関数です。メソッドは関数名を持つか、特定のイベントに関連付けられている必要があります。</p>
 
<p>メソッドが <attribute>event</attribute>属性を持っていれば、関連づけられたビューがこの名前のイベントを受け取った際にスクリプトが実行されます。例として、</p>

<pre>
&lt;view&gt; 
  &lt;method event="onclick"&gt; 
    &lt;!-- some JavaScript code ---&gt; 
  &lt;/method&gt; 
&lt;/view&gt;
</pre>

<p>ではビューがクリックされた時に起動される関数を定義しています。</p> 

<p>JavaScriptで関数は、<code>()</code>演算子を使って起動されるので、</p>

<pre>
&lt;view name="dog"&gt;   
  &lt;method name="bark"&gt; 
    &lt;!-- some JavaScript code ---&gt; 
  &lt;/method&gt; 
&lt;/view&gt;
</pre>

<p>この関数を名前から起動するには、次のようにします。</p>

<p><code>dog.bark();</code></p> 

<p>JavaScriptでは<code>this</code>キーワードはこの関数を起動したオブジェクトを参照するために使います。次の例を見てみましょう。</p> 

<pre> 
&lt;view&gt; 
  &lt;method name="bark"&gt; 
    &lt;!-- some JavaScript code ---&gt; 
  &lt;/method&gt; 
  &lt;method name="handler" event="onclick"&gt; 
    this.bark()  
  &lt;/method&gt; 
&lt;view&gt;
</pre>  

<p>ビューがクリックされると、<event>onclick</event>イベントは<method>handler</method>メソッドの起動し、次に <method>bark</method>メソッドが実行されます。イベントハンドラはほとんどの場合、次のように開始タグで一意名をつけられます。</p> 

<pre>
&lt;view onclick="clickHandler()"&gt; 
  &lt;method name="clickHandler"&gt; 
    &lt;!-- some JavaScript code --&gt; 
  &lt;/method&gt; 
&lt;/view&gt; 
</pre>

<p>メソッドの種類は大きく三つあります。</p> 
<ul> 
<li>   "oninit"メソッドは親オブジェクトが作成された際に実行されます。</li> 
<li>   "on + event"メソッドは親オブジェクトが特定のイベントを受け取った際に実行されます。 </li> 
<li>   名前付きのメソッドは他のメソッドから明示的に実行されます。</li> 
</ul>

<p>メソッドは従来のJavaScript文法で定義することもできますが、LZXでは<tagname>method</tagname>タグを使ってメソッドを宣言することが好ましいでしょう。</p> 

<p>また、LZXでは、他のオブジェクト指向システムと異なり、あるオブジェクトのあるインスタンス内のメソッドをオーバーライドすることができます。これについては <xref linkend="class-inheritance" />で説明しています。</p>

<h2>制約</h2> 

<!-- There's a copy of this next section in constraints.  Change that if you change this. -->

<p>LZXで制約とは、他の属性値の関数を値とする属性の一つです。制約をコーディングするための文法は次のようになります。</p> 

<pre>$<i>when</i>{<i>expression</i>}</pre>

<p>内容は</p>
<ul>
  <li><code>$</code>は制約を表す記号です。</li>
  
  <li><code><i>when</i></code>はオプションのコンパイラーへの指定です。 <code>immediately</code>、 <code>once</code>、 <code>always</code>のいずれかを設定します。  <code>$always{<i>expression</i>}</code>は省略して <code>${<i>expression</i>}</code>と書くことができます。 </li> 
  
  <li><code>{</code> と <code>}</code> は評価式の区切り記号です。</li>
  
  <li><code><i>expression</i></code>はJavaScript式です。</li>
</ul>

<p>これまで見たきてように、属性値が変化するたびに、その<event>on</event>イベントが作成されます。制約は一つ以上の他の属性値に依存している属性であるため、制約の値は依存している属性の<event>on</event>イベントを受けるたびに再計算されます。
</p>

<p>次の例で、</p> 

<pre>
&lt;view name="someView" 
      width="${someAttribute + someOtherAttribute}" 
 /&gt;
</pre>

<p><code>someView.width</code>の値は、<code>onsomeAttribute</code> または <code>onsomeOtherAttribute</code>イベントが発生するたびに、再計算されます。</p> 

<p>つまり次の例では、</p> 

<pre>
&lt;view name="beatles" width="${this.paul.width + 28}"&gt; 
  &lt;view name="paul" onclick="clickhandler()" &gt; 
    &lt;!-- clickhandler method here to increase paul's width based on user clicking mouse --&gt; 
  &lt;/view&gt; 
&lt;/view&gt;
</pre>

<p> <code>beatles</code>の幅は<code>paul</code>の幅に応じて伸び縮みします。制約式は<code>this.paul.width + 28</code>となります。</p> 

<p>これはもちろん簡単な例ですが、オブジェクト構造の宣言、また、相互に関連する規則の定義における重要な点を示しています。制約はLZXプログラミングにおける基礎的な概念であり、"LZXの考え方"を学ぶほとんどは、その構成部分の制約の表現内でシステムの動作を適切にモデル化することです。<xref linkend="constraints" />で制約についてより詳しく説明しています。 </p>

<h3>コードとビューの構造</h3> 

<p>LZXアプリケーションはオブジェクトの、たいていはビジュアルオブジェクトの階層で表されます。これらすべてのオブジェクトはキャンバス(canvas)と呼ばれる一つのオブジェクトの中に含まれます。LZXプログラムはXML文書であることを思い出してください。キャンバスはルート要素となります。したがって最も簡単なLZXプログラムは次のようになります。</p> 

<pre>&lt;canvas/&gt;</pre>

<p>このプログラムをコンパイルして、実行してもなにも出力されません。最も単純なビジュアルオブジェクトはビューなので、最小のLZXプログラムはこのようになります。</p> 

<pre>
&lt;canvas&gt;
  &lt;view&gt;
    &lt;text&gt; Hello World!&lt;/text&gt; 
  &lt;/view&gt; 
&lt;/canvas&gt;
</pre>

<p>このコードは明確に三つのオブジェクトの構造を定義しています。キャンバスとビューのサイズと背景色を設定することで、表示要素の関係をもっと分かりやすく表示させることができます。</p> 

<p>この簡単な例では、コード内の記述上の階層は、キャンバス内の表示階層と対応しています。実際には、<code>&lt;text&gt;</code>オブジェクトは<code>&lt;view&gt;</code>から生成されたクラスインスタンスです。 通常LZXプログラムでは、キャンバスはビューを含み、ビューは他のビューを含み、、、、といったパターンをより大規模に繰り返します。
クラスはビューをグループ化するために使われます。ボタン、ウィンドウ、入力フィールド、スライダーなどのコンポーネントはビューのまとまりで作られたクラスの一例です。</p> 

<p>LZXにはビュー間の関係を単純化する様々な方法が用意されています。例えば、それぞれの関係に応じてビューの"整理"行う、レイアウトにはたくさんの種類があります。これらは<xref linkend="layout-and-design"/>で説明しています。</p> 

<p>しかし、コード内の記述階層とキャンバス内の表示階層は、上の例のように明確なものばかりではありません。
特にLZXの強力なデータバインディング文は、ひとつの<code>&lt;view&gt;</code>タグテキスト内に、複数の<code>view</code>オブジェクトの生成を可能にしています。このような場合はオブジェクト間の複雑な関係を示すための正確な方法が非常に重要になります。 <xref linkend="views" />でより詳しく説明しています。</p> 

<h3>スコープ</h3> 

<p>LZXではローカルとグローバルな名前空間、またはスコープの概念は、基本的にJavaScriptのものと同じです。前述したように、JavaScriptの規則はJavaプログラマにとってびっくりするような点がいくつかあることに注意してください。</p> 

<p>JavaScriptでは<code>var</code>キーワードを前置しないかぎり、すべての変数はグローバルです。</p>

<p>つまり</p> 

<pre>a= 7; //　グローバル変数 a を定義</pre>

<p>と</p> 

<pre>var a = 7 // ローカル変数 a を定義</pre>

<p>です。つまり、例えばメソッド内の代入でグローバル変数値を変更することもできるということです。</p> 

<pre>for (a = 0; a &lt;n; a++);</pre>
 
<p>上の例ではグローバル変数の<varname>a</varname>を作成しています。もしすでに定義されていればこの変数の値を変更します。プログラマはきっと次のように書きたかったはずです。</p> 

<pre>for (var a = 0; a &lt;n; a++);</pre>

<p>LZXでは <attribute>name</attribute>属性はローカル、<attribute>id</attribute>属性はグローバルです。したがって、</p> 

<example executable="false">
&lt;canvas&gt; 
  &lt;view name="john" id="grandfather"&gt; 
    &lt;view name="john" id="father"&gt; 
      &lt;view name="john" id="son"/&gt; 
    &lt;/view&gt; 
  &lt;/view&gt; 
&lt;/canvas&gt;
</example>

<p>は正しい名前のスキーマです。最も内部のビューは<code>Canvas.john.john.john</code>または単に<code>son</code>として参照できます。</p>

<p>後で説明しますが、<tagname>script</tagname>タグを使って作成された関数は、プログラムのどこからでもアクセス可能です。</p>

<h2>データアクセス、操作、バインディング</h2> 

<p>LZXは、データ駆動型アプリケーションプログラムを簡単に作成できるよう設計されています。これによりプログラム見た目や動作をデータソースの値から定義することができます。これはタグとAPIにより、HTTPを通してデータを取得したり、メモリ上のXMLデータを操作したり、なかでもデータ階層をビュー階層へバインドしたりすることが可能となります。</p> 

<p>続く章ではLZXのデータバインドアーキテクチャの主な機能について概要を説明します。<xref linkend="data"/>でより詳しく説明しています。</p> 

<h3>データアクセス</h3> 

<p>LZXプログラムは次のようなXMLフォーマットのデータを操作することができます。</p> 
<ul> 
<li>   プログラムコード内に埋め込まれたもの。 </li> 
<li>   プログラムがコンパイルされた時にソースから読み込まれ、組み込まれたもの。</li> 
<li>   プログラムが実行された時にソースから読み込まれたもの</li> 
</ul> 

<p>XMLソースはデータセットと呼ばれるオブジェクトへ保存されます。 <tagname>dataset</tagname>タグは、例えば、クライアントとサーバーのキャッシュ、HTTPヘッダーを含めるか取り除くか、リクエストのキューなどを操作することのできる属性を持っています。<tagname>dataset</tagname>によって作成されたオブジェクトはLzDatasetsと呼ばれます。LzDatasetsのメソッドは、クエリ文字やパラメータなどを取得・設定することができます。</p> 

<h3>データ操作</h3> 

<p>LZXは、コンテントを探し、操作するためにデータポインタを利用します。これはデータセット内のノードを示すためのオブジェクトです。データポインタはXPathのサブセットをサポートしています。これはXML文書、LZXでいえばデータセットのパスを特定するためのW3C標準仕様です。XPathはUNIXのファイルシステムと似た表記法を用いてデータセット内のノードを参照します。データポインタは<method>selectNext</method>のような手続き関数の呼び出しと<method>setXPath</method>を使うXPathリクエストの実行の両方で再配置することができます。</p> 

<p>洗練されたパターンマッチのおかげで、XPath表記はとても簡明で強力です。ひとつのXPath式は任意の大きさのXML要素を表現することができます。 <method>addNode</method>、<method>setNodeName</method>、 <method>setXpath</method>、<method>selectParent</method>のようなメソッドを使うことで、XML構造を構築したり操作したりすることができます。</p> 

<h3>データバインディング</h3> 

<p>LZXは任意の形をもつデータ階層を表示階層にマージする、独自の方法を提供します。この機能はデータバインディングと呼ばれます。これは、表示階層内の子のデータコンテキストは、暗黙的にその親のデータコンテキストと同じであるという方法で実装されています。さらに選択された一組のデータの、各要素を表示するため、任意の数の表示階層を作成するようシステムに指示することもできます。</p> 

<p>これはデータポインタへビューをバインドさせる方法で実現しています。<code>datapath</code>は、データ階層を表示階層へ明示的に結合するための特別なやりかたです。次の例でみるように、</p> 

<pre>&lt;view name="bob" datapath="testdata:/*"&gt;</pre>

<p>ここで <varname>testdata</varname>はプログラムの前方で定義されたデータセットを参照しています。</p> 

<p>もし、この例が抽象的すぎると感じるなら、えっと、その通りです。ここでは短い説明にとどめ、より詳しい説明は<xref linkend="data"/>までお預けです。また、実際のデータ駆動型のアプリケーションで何ができるのか体験するために、<a href="http://www.laszlosystems.com/demos">http://www.laszlosystems.com/demos</a>にあるデモをいくつか試してみることもできます。</p> 

<p>理解の鍵となるLZXのデータバインディングの新規性とは、他の言語や技術でも表面的に似ているように見えるマージアルゴリズムを実装していますが、データソース要素と活きた接続を維持したまま、プログラムオブジェクトを作成するという点です。</p> 

<h2>LZXプログラムにおけるタグとスクリプトの連携</h2> 

<p>前述したように、実用的なLZXプログラムでは(XML)タグとスクリプトの両方を含んでいます。タグは宣言的に、つまりオブジェクトと属性を定義するために使われます。スクリプトは手続き的に、つまり処理の流れを明示的に定義するために使われます。どちらの種類のコードもLZXの中で自由に混在&#x2014;例えば、スクリプトはタグ内に表れます&#x2014;しますが、文法はそれぞれ整合性を維持しています。</p> 

<p>そのため、例えば、宣言的なLZXコードの中ではコメントは次のように書かれます。</p> 
<pre>&lt;!-- XML comment --&gt;</pre>
<p>一方JavaScriptでは、コメントは次のように書かれます。</p> 
<pre>// JavaScript comment</pre>
<p>つまりLZXは科学的に混ざらない二種類の合金のようなものです。</p> 

<p>プログラムの宣言的な部分と手続き的な部分は密接に結びついているため、最初、プログラム内でそれらを識別するのは少しばかり難しいかもしれません。しかし、一度少しの経験を得て、LZXの背後にあるロジックをつかみ始めたら、交替する文法はほとんど気にならなくなります。次の章では、どのように、そして、なぜ、二つのLZX"風味"を使うか説明します。それぞれの文法でビジュアルなコード支援を利用するには、使用するIDEやテキストエディタで、どのようにLZXのDTDやスキーマを設定できるか調べておいてください。</p> 

<h3>タグとスクリプトの連携方法</h3> 

<p>まずは文法的に可能なことと、意味のあることを区別することから始めましょう。</p> 

<h4>何が可能か</h4> 

<p>すべてのLZXプログラムは適格なXMLファイルであることを覚えておいてください。つまり埋め込まれたJavaScriptを含め、プログラムのすべての部分はXML規則に従う必要があります。よって、左不等号記号"&lt;"など、XMLで意味がある文字をJavaScriptで使う場合、次の二つの方法でXMLパーサーに混同されないように表記する必要があります。</p> 

<ul>
  <li><dfn>実体参照</dfn>を使い明示的に区切り文字を<dfn>エスケープ</dfn>します(左不等号記号の実態参照は<code>&amp;lt;</code>です)。</li>
  <li>XMLの<code>CDATA</code>構造を使い、<dfn>文字データ</dfn>のブロックの定義する。</li>
</ul> 

<p>この二つがXMLがJavaScriptでつまずかないようするための規則のすべてです。</p> 

<h4>意味があるのは何か</h4> 

<p>一つの言語の中での二つの異なった言語規則の混合は混乱を招きますが、LZXプログラムがどのように構造化され、どの種類のコードがどのように動作するかを理解することは非常に簡単です。LZXプログラムでスクリプトコードが表れる構文はごく限られています。次の構文をを理解したら、どの構文が使われているかということで混乱することはなくなるでしょう。JavaScriptが使われるのは次の場合のみです。</p> 
<ul> 
<li><code>&lt;script&gt;</code>と<code>&lt;/script&gt;</code>の開始、終了タグの間。</li>
<li><code>&lt;method&gt;</code>と<code>&lt;/method&gt;</code>の開始、終了タグの間。</li>
<li><code>oninit="<i>スクリプト式</i>"</code>のように、特定タグ内の右辺式に設定され引用符に囲まれた中の式。</li>
</ul>

<h3>タグを使うとき、スクリプトを使うとき</h3> 

<p>前で述べたように、LZXでできるほとんどのことは、XMLタグ、JavaScript APIどちらを使っても可能です。そして、LZXの習得には、いつどのようにそれぞれを使うか理解を深める必要があります。一般的に、コンパイル時に評価が行われるもの &#x2014;キャンバスのレイアウトのような &#x2014;にはタグが適していますし、スクリプトはユーザー入力に対する応答など、実行時に評価されるものに適しています。しかし、上のことを実際に応用するには、何がコンパイル時に行われ、何が実行時に行われるかを理解しておく必要があります。また、その事以上に行いたいことをはっきりさせ、また、解決しようとしている問題によって使い分ける必要があります。</p> 

<p>言い換えれば、いつタグを使い、いつスクリプトを使うかについて単純で明快な規則はありません。しかしよくできたLZXプログラムには共通したデザインパターンが見られます</p> 

<p>LZXは、主にビューと呼ばれる表示用オブジェクトの操作を行う言語だということを覚えておいてください。そのため、タグかスクリプトのどちらをいつ使うかという質問は、通常<em>ビューの生成と属性の操作</em>という文脈で問われます。スクリプトは、グローバル関数のような他のものに対して使うことができますが、これらのインスタンスにおいて、記述型のコード(つまりスクリプト）を書く必要は明快ですが、ビューとその属性の操作において手際よくこなす方法が必要です。</p> 

<p>例えば、簡単な簡単な二語の制約が、三十行ものコードで書かれたビューの関係を表すことができます。ほとんどの場合、制約はよりよいプログラミングの解決法です。もちろん"常に"そうだという訳ではありません。</p> 

<p>絶対的とはいえませんが、LZXにおける開発哲学において一般的な法則がいくつかあります。</p> 
<ul> 
<li>  他に方法がなければタグをつかう。 </li> 
<li>  他に方法がなければJavaScriptを使う。 </li> 
<li>  タグでもスクリプトでもできることはタグを使う。(特にそうしない理由がないのであれば）</li> 
</ul>

<p>次にそれぞれの法則について簡単に説明します。</p>

<todo>Please see
also Using the LZX Reference Manual in <fixme>FIXME</fixme> for an
explanation of how to use that document to learn what your options in
any instance.</todo>

<h4>他に方法がなければタグをつかう</h4> 

<p>スクリプトを使っては実現できない機能をもった特定のタグがあります。例えば、LZXプログラムのルートノード（かつすべてを含む）タグである<tagname>canvas</tagname>です。すべてのLZXプログラムは <code>&lt;canvas&gt;</code>ではじまり、<code>&lt;/canvas&gt;</code>で終わります。スクリプトで置き換えることはできません。同様に、 <tagname>splash</tagname>、 <tagname>method</tagname>、<tagname>attribute</tagname>、<tagname>resource</tagname>、<tagname>font</tagname>とその他いくつかのタグは、同じ意味をもつスクリプトがありません。さらに、特定のタグには、タグのみで設定可能な属性があります。</p> 

<h4>他に方法がなければJavaScriptを使う</h4> 

<p>タグでは実現することのできない機能のJavaScript APIがいくつかあります。例えば、<code>LzDelegate, LzEvent, LzParam</code>と、その他同様のAPIはタグでは実現できない操作を行います。同様に、特定のオブジェクト属性はスクリプトからのみ参照可能です。たとえ、オブジェクトがタグから生成されたとしても同じです。次の例を見てください。</p> 

<p><code>&lt;view name="franklin"&gt;</code></p> 

<p>この<code>franklin.subviews</code>という属性はスクリプトを使ってアクセスすることができますが、タグでは設定もアクセスもできません。</p> 

<h4>タグでもスクリプトでもできることはタグを使う</h4> 

<p>ほとんどの場合、タグでもスクリプトでも同じ事を実現することができますが、一般的にはタグを使うほうがよいでしょう。例えば、タグを使って"sam"という名前のビューを作成するには、</p> 

<p><code>&lt;view name="sam"&gt;</code></p> 
<p>とします。スクリプトでは、</p> 
<p><code>sam = new LzView();</code></p> 

<p>となります。タグを使えば、入れ子になったサブビューの階層をきわめて自然に作成でき、制約として属性を定義し、キャンバス上でビューを配置していくといった方法で、コードを書く事ができます。JavaScriptのみでこれらの結果を得るには途方もなく面倒で、言語の良さをほとんど無にすることになります。LZX言語で考えることを学ぶということは、生成時に設定された制約に従ってほぼ自動で動くビューを作ることを学ぶことです。</p> 

<h4>特にそうしない理由がないのであれば</h4> 

<p>時には宣言的なコードよりも手続き型のコードを書いた方がよい場合もあります。例えば、パフォーマンスを最適化するときなどには必要となるでしょう。多重の制約システムはCPUの負荷となることもあります。また手続き型のコードが理解しやすい場合もあります。複雑な規則をもったビューシステムはまったく不可解なものになりかねません。</p> 

<fixme>Appendix _____ contains a schematic overview of what functions can be done by tag alone, script alone, or by both.</fixme>

<h2>コンパイルと実行</h2> 
<p>LZXプログラムはまず、OpenLaszloコンパイラによってコンパイルされ、バイトコードとしてダウンロードされ、クライアント上で実行されます。プログラムを書く際に、コンパイルのパフォーマンス、ダウンロード、初期化時間、実行時のパフォーマンスといった妥協点を決めることになります。</p> 

<p>PerlやPythonといった他のスクリプト言語と同様に、LZXプログラムはほぼ線形順序で実行されます。つまり以下のように書いた場合には、</p> 

<pre>
&lt;view name="outside"&gt; 
  &lt;view name="inside"/&gt; 
&lt;/view&gt;
</pre>

<p><varname>inside</varname>は<varname>outside</varname>の前に生成されます。 
しかし、実際には各オブジェクトの生成、初期化の順番を制御したいと思うことが多いでしょう。
LZXはビューの生成と初期化に関して細かい制御手段を提供します。</p>

<p> <tagname>splash</tagname>タグはプログラムの初期化中に、情報を表示するためのキャンバスの利用を可能にします。 </p>

<!-- 
<h2>   Schematic of LZX API Categories</h2></p></p>
-->
</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
